<template>
	<view class="content">
		<view class="title">
			<view class="time">11月20日-11月27日</view>
			<view class="money-num">
				<text>HK$</text>
				<view>{{allMoney}}</view>
			</view>
		</view>
		<view class="data">
			<view class="one-data" v-for='(item,index) in dataList' :key='index'>
				<view class="price" v-if="item.money>0">
					<view>HK$</view>
					<text>{{item.money}}</text>
				</view>
				<view class="bar" :style="{height:item.height+'rpx'}"></view>
				<view class="day">{{item.date}}</view>
				<view class="week">週{{item.week}}</view>
			</view>
		</view>
		<view class="all-data">
			<view class="one-data">
				<view>{{allTime}}</view>
				<text>上線時間(h)</text>
			</view>
			<view class="one-data">
				<view>{{allMileage}}</view>
				<text>行程(km)</text>
			</view>
			<view class="one-data">
				<view>{{allScore}}</view>
				<text>里程分</text>
			</view>
		</view>
		<view class="capital-title">資金明細</view>
		<view class="one-order" v-for="(item,index) in orderList" :key="index">
			<view class="left-infor">
				<view class="one-address">
					<view class="start-point"></view>
					<text>{{item.start_address}}</text>
				</view>
				<view class="one-address" style="margin-top:15rpx">
					<view class="end-point"></view>
					<text>{{item.end_address}}</text>
				</view>
			</view>
			<view class="price">
				<view>{{item.money}}</view>
				<text>元</text>
			</view>
		</view>
	</view>
</template>

<script>
	import { getFundLog,getOrderLog } from '../../request/api.js'
	export default {
		data() {
			return {
				dataList: [
				],
				allMoney:0,
				pageIndex:1,
				allTime:0,
				allMileage:0,
				allScore:0,
				orderList:[
					
				]
			};
		},
		onShow() {
			let that = this;
			setTimeout(() => {
				that.getList()
			}, 500)
		},
		methods: {
			async getList() {
				let res=await getOrderLog({
					page:this.pageIndex,
					limit:10
				});
				console.log(res);
				let dataList=res.data.week_log;
				this.allMoney=res.data.all_money;
				this.allTime=res.data.linetimes_total;
				this.allMileage=res.data.distance_total;
				this.allScore=res.data.duration_total;
				this.orderList=res.data.logs.data;
				let moneyList = dataList.map((item) => {
					return item.money
				})
				moneyList.sort((a, b) => {
					return b - a;
				})
				let maxMoney = moneyList[0];
				this.dataList = dataList.map((item) => {
					let height = 230 * (item.money / maxMoney);
					switch (item.week) {
						case '1':
							item.week = '一'
							break;
						case '2':
							item.week = '二'
							break;
						case '3':
							item.week = '三'
							break;
						case '4':
							item.week = '四'
							break;
						case '5':
							item.week = '五'
							break;
						case '6':
							item.week = '六'
							break;
						case '7':
							item.week = '日'
							break;
					}
					return {
						height: height,
						...item
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #FAFAFA;

		.content {
			width: 702rpx;
			padding-top: 24rpx;
			margin-left: auto;
			margin-right: auto;

			.title {
				display: flex;
				align-items: flex-end;
				font-size: 30rpx;
				color: #040404;
				line-height: 42rpx;
				justify-content: space-between;

				.money-num {
					display: flex;
					align-items: flex-end;
					font-size: 50rpx;
					line-height: 61rpx;

					text {
						font-size: 30rpx;
						line-height: 42rpx;
					}
				}
			}

			.data {
				width: 702rpx;
				height: 433rpx;
				background-color: #ffffff;
				border-radius: 15rpx;
				box-shadow: 0 2rpx 12rpx 0 rgba(204, 204, 204, 0.3);
				margin-top: 24rpx;
				padding: 24rpx;
				box-sizing: border-box;
				display: flex;
				align-items: flex-end;
				justify-content: space-between;

				.one-data {
					width: 90rpx;
					display: flex;
					justify-content: flex-end;
					flex-direction: column;
					align-items: center;

					.price {
						display: flex;
						align-items: flex-end;
						font-size: 20rpx;
						color: #040404;
						line-height: 28rpx;
						width: 80rpx;

						text {
							font-size: 30rpx;
							line-height: 36rpx;
						}
					}

					.bar {
						width: 50rpx;
						background: linear-gradient(180deg, #FF817B 0%, #FF3632 100%);
						margin-top: 20rpx;
						height:0;
						transition: all .5s;
					}

					.day {
						font-size: 24rpx;
						color: #040404;
						margin-top: 16rpx;
						line-height: 32rpx;
					}

					.week {
						font-size: 20rpx;
						color: #9E9E9E;
						line-height: 28rpx;
						margin-top: 5rpx;
					}
				}
			}

			.all-data {
				margin-top: 60rpx;
				display: flex;
				align-items: center;
				justify-content: space-around;

				.one-data {
					display: flex;
					align-items: center;
					justify-content: center;
					flex-direction: column;
					font-size: 66rpx;
					line-height: 81rpx;
					font-weight: bold;

					text {
						font-size: 26rpx;
						line-height: 37rpx;
						margin-top: 8rpx;
						font-weight: normal;
					}
				}
			}

			.capital-title {
				font-size: 30rpx;
				color: #040404;
				line-height: 42rpx;
				margin-top: 60rpx;
			}

			.one-order {
				width: 702rpx;
				height: 147rpx;
				background-color: #ffffff;
				border-radius: 15rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 24rpx;
				box-sizing: border-box;
				margin-top: 24rpx;

				.one-address {
					display: flex;
					align-items: center;
					font-size: 30rpx;
					line-height: 42rpx;
					color: #040404;

					.start-point {
						width: 16rpx;
						height: 16rpx;
						border-radius: 50%;
						background-color: #D71B0A;
						margin-right: 20rpx;
					}

					.end-point {
						width: 16rpx;
						height: 16rpx;
						border-radius: 50%;
						background-color: #FC9A03;
						margin-right: 20rpx;
					}
				}

				.price {
					display: flex;
					align-items: flex-end;
					font-size: 50rpx;
					line-height: 61rpx;
					font-weight: bold;

					text {
						font-size: 26rpx;
						line-height: 37rpx;
						margin-left: 5rpx;
					}
				}
			}
		}
	}
</style>